<template>
	<view class="container">
		<view class="header">
			<view class="icon"><u-icon name="arrow-left" color="#ccc" size="40" @click="prevMonth"></u-icon></view>
			<view style="margin: 0 20upx">{{ currentMonth + 1 }}月 {{ currentYear }}年</view>
			<view class="icon">
				<u-icon name="arrow-right" color="#ccc" size="40" @click="nextMonth"></u-icon>
			</view>
		</view>
		<view class="calendar">
			<view class="weekdays">
				<view class="weeks" v-for="(day,index) in weekdays" :key="index" :class="{ 'first-week': index > 0 }">
					{{ day }}
				</view>
			</view>
			<view class="calendar-body">
				<view class="row" v-for="(row,indexR) in calendarRows" :key="indexR">
					<view class="cell" v-for="(cell,index) in row" :key="index" @click="selectDate(cell)"
						:class="{ 'selected': cell.selected,'first-column': index > 0, 'right': index == 6 }">
						{{ cell.date == undefined ?"" : cell.date }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				currentMonth: 0,
				currentYear: 0,
				// weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
				weekdays: ['日', '一', '二', '三', '四', '五', '六'],
				calendarRows: [],
			}
		},
		mounted() {
			// this.$refs.popup.open()
			this.renderCalendar(this.currentDate);
		},
		methods: {
			// 上月
			prevMonth() {
				this.currentDate.setMonth(this.currentDate.getMonth() - 1);
				this.renderCalendar(this.currentDate);
			},
			// 下月
			nextMonth() {
				this.currentDate.setMonth(this.currentDate.getMonth() + 1);
				this.renderCalendar(this.currentDate);
			},
			// 获取日历
			renderCalendar(date) {
				const currentMonth = date.getMonth();
				const currentYear = date.getFullYear();
				const currentDate = new Date();
			
				const firstDay = new Date(currentYear, currentMonth, 1).getDay();
				const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
			
				this.currentMonth = currentMonth;
				this.currentYear = currentYear;
			
				const calendarRows = [];
				let dateCount = 1;
			
				for (let i = 0; i < 6; i++) {
					const row = [];
			
					for (let j = 0; j < 7; j++) {
						if (i === 0 && j < firstDay) {
							row.push({});
						} else if (dateCount > daysInMonth) {
							break;
						} else {
							row.push({
								date: dateCount,
								selected: false
							});
							dateCount++;
						}
					}
			
					calendarRows.push(row);
				}
			
				this.calendarRows = calendarRows;
			},
			// 点击日期事件
			selectDate(cell) {
				const selectedDate = cell.date;
				if (selectedDate == undefined) {
					return;
				}
				cell.selected = !cell.selected
				// this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0 40upx;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 1px solid #ccc;
		border-bottom: none;
	}

	.header {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		font-size: 40upx;
		font-weight: bold;
		padding: 20upx 40upx;
		border: 1px solid #ccc;
		border-bottom: none;
		border-right: none;

		.icon {
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.calendar {
		font-size: 35upx;

	}

	.weekdays {
		display: flex;
		font-weight: bold;
		justify-content: space-around;

		.weeks {
			flex-basis: calc(100% / 7);
			padding: 10px;
			border: 1px solid #ccc;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		.weeks:last-child {
			border-right: none;
		}

		.first-week {
			border-left: none;
		}
	}

	.calendar-body {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.row {
		display: flex;
		flex-direction: row;
		border: 1px solid #ccc;
	}

	.cell {
		flex-basis: calc(100% / 7);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		border-right: 1px solid #ccc;
	}


	.first-column {
		border-left: none;
	}

	.right {
		border-right: none;
	}

	.selected {
		background-color: #f00;
	}
</style>